<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        数据驱动视图
     -->
    <div id="app">

        <!-- 文本插值 -->
        <div>{{ raw }}</div>

        <!-- 原始html
            会将 raw 的内容通过 innerHTML 设置给当前 div

            PS: 慎用，可能会有 xss 攻击。
        -->
        <div v-html="raw"></div>

        <!-- Attribute 绑定 
            完整写法
            <p v-bind:title="title">Hello World</p>    
            简写写法
            <p :title="title">Hello World</p>    
            超简写写法，3.4+ 开始支持
                    PS: 直接DOM模板中不支持，不符合html规范，
                        可以在 template 选项下与 单文件组件中得到支持
            <p :title>Hello World</p>
        -->
        <p :title="title">Hello World</p>

        <!-- 布尔类型的值 -->
        <button v-bind:disabled="isDisabled">登录</button>
        <input v-bind:readonly="isReadonly" type="text" placeholder="请输入用户名" />

        <!-- 动态绑定多个值 
            如果要绑定的属性是一个对象的同名属性的话，多个绑定可以直接如下简写
        -->
        <div :username="person.username" :age="person.age" :sex="person.sex">我是一个小伙子</div>
        <div v-bind="person">我是一个小伙子-简写</div>

        <!-- JavaScript 表达式 
            如何判断我们写在 {{}} 与 v-bind:赋值的内容中是否正确的判断条件就是：
                这个内容有没有返回值
        -->

        <div>{{ person.age >= 18 ? '成年了' : '未成年' }}</div>

        <!-- 受限的全局访问
            全局对象只支持 Math 与 Date。
        -->
        <button>{{ Date.now() }}</button>

        <button>{{ Math.random() }}</button>

        <button v-bind:[attr]="title">1111</button>

        <!-- 
            指令的完整语法

            v-on:submit.prevent="onSubmit"

                v-on        指令的名字
                submit      参数
                prevent     修饰符
                onSubmit    值
         -->
    </div>

    <script type="module">
        import { createApp } from './lib/vue3.esm.browser.js'

        createApp({
            data() {
                return {
                    attr: 'title',
                    raw: '<button>点我</button>',

                    title: '我的天，李威真帅',

                    isDisabled: true,

                    isReadonly: true,

                    person: {
                        username: '张三',
                        age: 18,
                        sex: '男'
                    }
                }
            },

            // template: `
            //     <p :title>Hello World</p>
            // `
        }).mount('#app')
    </script>
</body>

</html>